<template>
    <section class="center-list">
        <div class="center-list-title" v-if="titleOption">
            <span v-if="titleOption.title" v-html="titleOption.title"></span>
            <a v-if="titleOption.more" href="javascript:" v-html="titleOption.more" @click="onClickTitleMore"></a>
        </div>
        <!-- type==="1" 纯文字 -->
        <div v-show="!listLoading" class="center-list-item" v-for="center in centerList" v-if="type==='1'" data-centerId={{center.centerId}} @click="onClickCenter(center.centerId)">
            <div class="center-name">{{center.name}}</div>
            <div class="center-address"><i class="iconfont icon-address"></i>场馆地址:&nbsp;{{center.address}}</div>
            <div class="center-openTime"><i class="iconfont icon-opentime"></i>场馆地址:&nbsp;{{center.openTime}}</div>
            <div class="center-centerType"><i class="iconfont icon-sport"></i>场馆类型:&nbsp;{{center.sportType}}</div>
        </div>
        <div v-show="listLoading" class="list-loading">
            <spinner :type="circles" slot="value"></spinner>
        </div>
    </section>
</template>
<script>
import '../../sass/common/iconfont.scss';

import {
    go
} from '../libs/router';
import Spinner from 'vuxComponents/spinner';
// import { Cell, Group } from 'vuxComponents'
export default {
    components: {
        Spinner
    },
    props: {
        titleOption: Object,
        centerList: Array,
        type: {
            type: String,
            default: '1'
        }
    },
    vuex: {
        getters: {
            listLoading: (state) => state.listLoading
        }
    },
    methods: {
        onClickTitleMore() {
            this.titleOption.more && go(this.titleOption.link, this.$router)
        },
        onClickCenter(centerId) {
            go({
                name: 'centerdetail',
                params: {
                    centerid: centerId
                }
            }, this.$router)
        }
    }
}
</script>
<style lang="sass" scoped>
@import '../../sass/mixin/setOnepx.scss';
.center-list {
    min-height: 100%;
    .center-list-title {
        height: 40px;
        line-height: 40px;
        font-size: 20px;
        position: relative;
        padding-left: 30px;
        &:before {
            @include setTopLine(#e5e5e5);
        }
        &:after {
            @include setBottomLine(#e5e5e5);
        }
        a {
            position: absolute;
            right: 30px;
            font-size: 16px;
            color: #1bcbe0;
            &:after {
                content: " ";
                display: inline-block;
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
                height: 6px;
                width: 6px;
                border-width: 2px 2px 0 0;
                border-color: #c7c7cc;
                border-style: solid;
                position: absolute;
                top: 50%;
                right: -15px;
                margin-top: -4px;
            }
        }
        span {
            position: relative;
            &:before {
                content: " ";
                display: inline-block;
                width: 3px;
                height: 20px;
                position: absolute;
                top: 50%;
                left: -10px;
                background-color: #00c8df;
                margin-top: -10px;
            }
        }
    }
    .center-list-item {
        padding: 10px 10px 10px 15px;
        div {
            height: 25px;
            line-height: 25px;
        }
        i {
            color: #00c8df;
            padding: 5px;
        }
        .center-name {
            font-size: 18px;
        }
    }
}
</style>
